<template>
  <view class="Grid">
    <view class="Grid-Item" v-if="isShowCamera">
      <!-- <cover-image src="../static/upload.png"></cover-image> -->
      <UploadFileVue :showList="showList" :backgroundColor="'#FE5C71'">
        <up-icon name="camera-fill" color="#fff" size="40"></up-icon>
      </UploadFileVue>
    </view>
    <view class="Grid-Item" v-for="item in videolist" :key="item.id">
      <video
          :src="item.url"
          :poster="item.url + '?x-oss-process=video/snapshot,t_0,f_jpg'"
          controls
          style="width: 100%;height: 100%;"
      ></video>
      <view class="grid-dot" v-if="isShowDot">
        <u-icon v-if="item.flag" name="checkmark-circle" color="white" size="30" @click="add(item)"></u-icon>
        <view class="checkmark-circle" v-else @click="upd(item)">
          {{dynamicList && dynamicList.findIndex((e)=>{
          return e.url==item.url
          })+1}}
        </view>
      </view>
    </view>
    <view class="Grid-Item" v-for="item in imagelist" :key="item.id">
      <image :src="item.url" style="width: 100%;height: 100%;" mode="aspectFill"></image>
      <view class="grid-dot" v-if="isShowDot">
        <u-icon v-if="item.flag" name="checkmark-circle" color="white" size="30" @click="add(item)"></u-icon>
        <view class="checkmark-circle" v-else @click="upd(item)">
          {{dynamicList && dynamicList.findIndex((e)=>{
          return e.url==item.url
          })+1}}
        </view>
      </view>
    </view>
    <view class="Grid-Item" v-if="!isShowCamera">
      <UploadFileVue :showList="showList" :backgroundColor="'#F5F5F5'">
        <up-icon name="plus" color="#B5B5B5" size="40"></up-icon>
      </UploadFileVue>
    </view>
  </view>
  <u-popup :show="show" mode="bottom" :overlay="false" bgColor="#F4F4F4">
    <view class="popup">
      <view class="bottom">
        <view v-for="item in dynamicList" :key="item">
          <view class="small">
            <video v-if="item.type=='video'" class="imgs" :src="item.url"></video>
            <image v-else class="imgs" :src="item.url" mode="aspectFill"/>
            <view class="del" @click="del(item)">
              <u-icon name="close-circle-fill" size="20"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="next" :style="{bottom:safeAreaBottom + 'rpx'}">
        <view class="choose_length">
          已选择 {{dynamicList.length}} 张
        </view>
        <view class="btn" @click="next">下一步({{dynamicList.length}})</view>
      </view>
    </view>
  </u-popup>
</template>

<script setup>
import {
  computed,
  onMounted,
  ref
} from 'vue'

const dynamicList = ref([])
const props = defineProps(['isShowCamera', 'showList', 'isShowDot'])
const videolist = computed(() => {
  return props.showList.filter((item) => item.type === 'video')
})

const imagelist = computed(() => {
  return props.showList.filter((item) => item.type !== 'video')
})

const show = ref(false)

// 修改选中的图片状态
const upd = (e) => {
  e.flag = !e.flag
  dynamicList.value = dynamicList.value.filter((item) => {
    return item.url != e.url
  })
  if (dynamicList.value.length == 0) {
    show.value = false
  }
}

const add = (e) => {
  console.log(e, "| e");
  e.flag = !e.flag
  if (dynamicList.value.length >= 9) {
    uni.showToast({
      title: '最多添加9个',
    })
  } else {
    let object = {
      ...e,
      id: dynamicList.value.length + 1
    }
    dynamicList.value.push(e)
    show.value = true
  }
}

const del = (e) => {
  e.flag = !e.flag
  dynamicList.value = dynamicList.value.filter((item) => {
    return item.url != e.url
  })
  if (dynamicList.value.length == 0) {
    show.value = false
  }
}

// 跳转
const next = () => {
  console.log(dynamicList.value, "| dynamicList.value");
  uni.navigateTo({
    url: "/pages/tab-publish-content/issue/index?item=" + JSON.stringify(dynamicList.value)
  })
}
</script>

<style lang="scss" scoped>
.Grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;

  .Grid-Item {
    width: 225rpx;
    height: 225rpx;
    margin-left: 8rpx;
    margin-bottom: 20rpx;
    text-align: center;
    box-sizing: border-box;
    position: relative;

    .grid-dot {
      position: absolute;
      top: 5px;
      right: 5px;

      .checkmark-circle {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        background-color: #FE5C71;
        color: white;
      }
    }
  }
}

.popup {
  width: 100vw;

  .bottom {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;
    margin-bottom: 40rpx;

    .small {
      position: relative;

      .imgs {
        width: 136rpx;
        height: 136rpx;
        border-radius: 8rpx;
        margin-left: 20rpx;
      }

      .del {
        position: absolute;
        top: 8rpx;
        right: 6rpx
      }
    }
  }

  .next {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60rpx;
    margin-right: 20rpx;
    margin-left: 20rpx;

    .choose_length {
      color: #9D9D9D;
    }

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(254, 92, 113);
      border-radius: 30rpx;
      color: white;
      font-size: 24rpx;
      width: 144rpx;
      height: 56rpx;
    }
  }
}
</style>